<!doctype html>
<html lang="en" data-framework="jquery">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>HuckleberryTeam</title>
	<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
	<link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css">
    <link href="css/jquery.ui.tabs.css" rel="stylesheet" />

</head>
<body>
    <div id="tabs">
        <ul>
		<li><a href="#tabs-1">Notes</a></li>
		<li><a href="#tabs-2">Events</a></li>
	    </ul>
        <div id="tabs-1">
	        <section id="todoapp" class="todoList">
		        <header class="header">
			        <h1>Notes</h1>
			        <input class="new-todo" placeholder="What needs to be done?" autofocus>
		        </header>
		        <section class="main">
			        <input class="toggle-all" type="checkbox">
			        <label for="toggle-all">Mark all as complete</label>
			        <ul class="todo-list"></ul>
		        </section>
		        <footer class="footer">
			        <span class="todo-count"><strong>0</strong> item left</span>
			        <button class="clear-completed">Clear completed</button>
		        </footer>
	        </section>
        </div>

        <div id="tabs-2">
            <section id="expirable" class="todoList">
		        <header class="header">
			        <h1>Events</h1>
                    <input id="datepicker" class="new-todo"  placeholder="When it needs to be done?" type="text" /> <br />
			        <input class="new-todo" placeholder="What needs to be done?" >
		        </header>
		        <section class="main">
			        <input class="toggle-all" type="checkbox">
			        <label for="toggle-all">Mark all as complete</label>
			        <ul class="todo-list"></ul>
		        </section>
		        <footer class="footer">
			        <span class="todo-count"><strong>0</strong> item left</span>
			        <button class="clear-completed">Clear completed</button>
		        </footer>
	        </section>
        </div>
    </div>

	<script id="todo-template" type="text/x-handlebars-template">
	{{#this}}
	<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
		<div class="view">
			<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
			<label>{{title}}</label>
			<button class="destroy"></button>
		</div>
		<input class="edit" value="{{title}}">
	</li>
	{{/this}}
	</script>
	<script id="footer-template" type="text/x-handlebars-template">
	<span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span>
	{{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}}
	</script>

    <script id="todo-template-expirable" type="text/x-handlebars-template">
	{{#this}}
	<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
		<div class="view">
			<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
			<label>{{title}}</label>
            <label>Date: {{expirationDate}}</label>
            <label>Remaining: {{remaining}}</label>
            <button class="destroy"></button>
		</div>
        <input class="edit title"  value="{{title}}">
        <input class="edit data" class="edit-datepicker" value="{{expirationDate}}">
	</li>
	{{/this}}
	</script>

	<script src="bower_components/todomvc-common/base.js"></script>
	<script src="bower_components/jquery/jquery.js"></script>
	<script src="bower_components/handlebars/handlebars.js"></script>

    <script src="bower_components/jquery/OOPPlugin.js"></script>

    <script src="bower_components/jquery/jquery.ui.core.js"></script>
    <script src="bower_components/jquery/jquery.ui.widget.js"></script>
    <script src="bower_components/jquery/jquery.ui.mouse.js"></script>
    <script src="bower_components/jquery/jquery.ui.datepicker.js"></script>
    <script src="bower_components/jquery/jquery.ui.sortable.js"></script>
    <script src="bower_components/jquery/jquery.ui.tabs.js"></script>
    
    <script src="js/Utils.js"></script>
    <script src="js/BasicTodo.js"></script>
    <script src="js/TodoManager.js"></script>
   
    <script src="js/ExpirableTodoManager.js"></script>
    <script src="js/ExpirableTodo.js"></script>
    <script src="js/ToDoControl.js"></script>
    <script src="js/Init.js"></script>
    <script>
        var basicToDoList = ToDoControl.startBasicToDoList("#todoapp", "#todo-template", "#localToDoApp");       
        var expirable = ToDoControl.startExpirableEventTodo("#expirable", "#todo-template-expirable", "localExpirable");
        Init.initializeDatePickers();
        Init.initializeSortable();
        Init.initializeTabs();
    </script>
    
</body>
</html>
